<template>
  <div id="app">
    <x-header :left-options="HEADER" v-if="TABBAR">别等了</x-header>
    <div v-transfer-dom>
       <loading v-model="isLoading" position="absolute" style="z-index:99999"></loading>
    </div>

    <router-link to="/">Go to /</router-link>
    <router-link to="/hello2">Go to Hello2</router-link>
    <router-link to="/hello1">Go to Hello2</router-link>
    <router-link to="/flexbox">Go to Hello2</router-link>
    <router-view></router-view>
    <tabbar v-if="TABBAR">      
      <tabbar-item badge="2" selected link="/hello2">
        <img slot="icon" src="./assets/vux_logo.png">
        <span slot="label">试讲</span>
      </tabbar-item>
      <tabbar-item  link="/component/demo">
        <img slot="icon" src="./assets/vux_logo.png">
        <span slot="label">打分</span>
      </tabbar-item>
      <tabbar-item >
        <img slot="icon" src="./assets/vux_logo.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Loading } from 'vux'
import { mapState } from 'vuex'
import { XHeader } from 'vux'
import { Tabbar, TabbarItem,TransferDomDirective as TransferDom } from 'vux'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'app',
  data: function () {
    return {
      loadingstatus: false }
  },directives: {
    TransferDom
  },
  components: {
    Loading,
    XHeader,
    Tabbar,
    TabbarItem,

  },
  computed: {
    ...mapState({
      isLoading: state => state.vux.isLoading
    }),
    ... mapGetters(['TABBAR','HEADER']),
  },
  methods: {
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/1px.less';
body {
  background-color: #fbf9fe;
}
</style>
